import styled from "@emotion/styled"
import { useNavigate } from "react-router-dom"
import Svg from "@/components/base/Svg"

type PageHeaderProps = {
    title: string
}

const Header = styled.div`
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 8rem 12rem;
    position: fixed;
    width: 100%;
    height: 44rem;
    align-items: center;
    z-index: 100;
    .back {
        width: 28rem;
        height: 28rem;
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        left: 12rem;
        top: 8rem;
        > img {
            width: 8rem;
            height: 16rem;
        }
    }
    .title {
        font-size: 18rem;
        font-weight: 700;
        color: #131416;
    }
`

export default function PageHeader(props: PageHeaderProps) {
    const navigate = useNavigate()
    return (
        <Header>
            {/* 返回上一页 */}
            <span
                className="back"
                onClick={() => navigate(-1)}
            >
                {" "}
                <Svg src="pages/Walfare/svg/back.svg" />
            </span>
            <span className="title">{props.title}</span>
        </Header>
    )
}
